<template>
	<view class="content">
		<view class="top">
			<view class="top_title">手续费</view>
			<view class="paymoney">
				<view class="sign iconfont">&#xe604;</view>
				<view class="money">{{serviceMoney}}</view>
			</view>
		</view>

		<view class="group">
			<view class="grouplist">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="index">
						<view class="uni_name">
							<image class="uni_icon" :src="item.image" mode=""></image>
							<view class="uni_detail">{{item.name}}</view>
						</view>
						<view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view>
					</label>

				</radio-group>
			</view>

		</view>
		<view class="bottom">
			<view class="submit" @click="gopay">去支付</view>
		</view>

		<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" @forgetPwd="forgetPwd" :value="paymentPwd"
		 digits="6" />

	</view>
</template>

<script>
	import ssPaymentPassword from '../../../../components/sanshui-payment-password'
	export default {
		components: {
			ssPaymentPassword
		},
		data() {
			return {
				items: [
					{
						value: '2',
						name: '微信',
						image: 'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wxpay.png'
					}
					
				],
				serviceMoney: '', // 手续费
				id: '',
				payType: '',
				mode: 1,
				paymentPwd: '',
				payPassword: '' // 支付密码

			}
		},
		onLoad(options) {
			console.log(options)
			this.serviceMoney = options.serviceMoney;
			this.id = options.id;
			let that = this;
			uni.$on('login', function(data) {
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
			})
		},
		onUnload() {
			uni.$off('login')
		},
		methods: {

			radioChange: function(e) {
				console.log(e)
				this.payType = e.detail.value;

			},
			// 去支付
			gopay: function() {
				let that = this;
				let payType = that.payType;
				if (payType == '') {
					that.tui.toast('请选择支付方式')
					return
				}
				// #ifdef H5 || MP-WEIXIN
				that.api.userSponsorTransition({
					id: that.id,
					payType: payType
				}).then(res => {
					console.log(res, "微信")
					let orderInfo = res.data;
					// console.log(orderInfo, "orderInfo===")
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: orderInfo.timeStamp,
						nonceStr: orderInfo.nonceStr,
						package: orderInfo.package,
						signType: 'MD5',
						paySign: orderInfo.paySign,
						success(res) {
							that.cacheHelper.updateUserInfo()
							that.tui.toast('支付成功')
							setTimeout(function() {
								uni.$emit('goTake', {msg: '订单'});
								uni.$emit('update', {msg: '页面更新'})
								uni.$emit('billOrder', {msg: '页面更新'})
								uni.$emit('login', {msg: '页面更新'})
							}, 500)
							setTimeout(function () {
								uni.redirectTo({
									url: '../../user/userSaleBill/userSaleBill',
								});
							},1000)
						},
						fail(err) {
							that.tui.toast(err)
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500)
						}
					});
				})
				// #endif
				
			},
			// 忘记密码
			forgetPwd: function() {
				uni.navigateTo({
					url: '../../user/paymentSetting/setPayPassword/setPayPassword',
				});
			},
			submitHandle: function(e) {
				let that = this;
				console.log(e)
				that.payPassword = e.value;
				that.api.userSponsorTransition({
					id: that.id,
					payType: that.payType,
					payPassword: that.payPassword
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function() {
						uni.redirectTo({
							url: '../../user/userSaleBill/userSaleBill',
						});
						uni.$emit('goTake', {
							msg: '页面更新'
						});
						uni.$emit('update', {
							msg: '页面更新'
						})
						uni.$emit('billOrder', {
							msg: '页面更新'
						})
						uni.$emit('billOrder', {
							msg: '页面更新'
						})
					}, 500)

				}).catch(err => {
					console.log(err)
					that.tui.toast(err.msg)
				})

			}

		},
		// 监听返回按钮
		onBackPress(e) {
			console.log(e)
			console.log("ppp")
			return
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		box-sizing: border-box;
		text-align: center;

		.top_title {
			width: 100%;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #140005;
			line-height: 60rpx;
			font-weight: 500;
		}

		.top_tip {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			line-height: 50rpx;
		}

		.top_date {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
			font-size: 36rpx;
			color: #666666;
			font-weight: 500;
			letter-spacing: 5rpx;

			.top_date_curr {
				color: #E42221;
				padding-left: 20rpx;
			}
		}

		.paymoney {
			width: 418rpx;
			line-height: 100rpx;
			border: 2rpx solid #E42221;
			margin: 20rpx auto 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 62rpx;
			color: #E42221;

			.sign {
				font-size: 32rpx;
				color: #FFDA71;
				padding-top: 15rpx;
			}
		}

	}

	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0 180rpx 0;
		border-top: 2rpx dashed #666;

		.grouplist {
			width: 100%;
			box-sizing: border-box;

			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80rpx;
				padding: 10rpx 0;

				.radio {
					transform: scale(0.8);
				}

				.uni_name {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.uni_icon {
						width: 50rpx;
						height: 50rpx;
					}

					.uni_detail {
						padding-left: 18rpx;
					}

				}


			}



		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 66;

		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}
</style>
